<!-- 在script 标签上使用setup，可以不用再使用return的写法了 -->
<!-- 其中 setup 标记的 script 必须是单独的，不能和export等其他共用 -->
<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!--<script lang="ts">
export default {
  name: 'Person',
}
</script>-->

<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!-- 如果没有定义组件名称，没有给script写name定义组件名称的话，默认就是组件的名称。 -->
<script setup lang="ts" name="Person">
import type { Persons } from '@/types'
import { nanoid } from 'nanoid'
// 使用 defineProps 来获取父组件传过来的数据
// 接收heihei、haha
// defineProps(['heihei', 'haha', 'personLists'])

// 1、只接受 personLists
// defineProps(['personLists'])

// 2、接收 personLists + 限制类型
// defineProps<{ personLists: Persons }>()

// 3、接收 personLists + 限制类型 + 限制必要性 + 指定默认值
withDefaults(defineProps<{ personLists?: Persons }>(), {
  // 此处必须是一个函数返回值
  personLists: () => [
    { id: nanoid(), name: '张珊珊', age: 18 },
    { id: nanoid(), name: '李思思', age: 18 },
    { id: nanoid(), name: '王舞', age: 18, address: '北京市昌平区宏福科技园' },
  ],
})

// 接收heihei、haha同时将 props 保存起来
// let a = defineProps(['heihei', 'haha'])
// console.log(a.heihei, a.haha, a['heihei'], a['haha'])
</script>

<template>
  <div class="person"></div>
  <!-- <h1>父组件App传递过来的数据：{{ heihei }} - {{ haha }}</h1>-->
  <ul>
    <li v-for="person of personLists" :key="person.id">
      {{ person.id }} - {{ person.name }} - {{ person.age }}
    </li>
  </ul>
</template>

<style scoped>
.person {
  background-color: #dab649;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 10px;
}
</style>
